<html>
<head>
    <meta charset="utf-8">
    <script src="jquery-3.1.1.js"></script>
    <meta name="author" content="ykf">
    <title></title>
    <style>
    body{
        background-color: #eee;
    }
    main{
        position: relative;
        height: 780px;
        width: 380px;
        margin: 10px auto;
        background-color: white; 
    }
    #d1{
        /*background-color: orange;*/
        z-index: 1;
        margin: 20px auto;
        cursor: pointer;
    }
    #d4{
        position: absolute;
        top: 580px;
        display: inline-block;
        display: flex;
        font-size: 12px;
        margin-left: 15px;
        /*overflow: hidden;*/
    }
    #d2{
        display: inline-block;
        position: absolute;
        margin: 0;
        width: 170px;
        height: 185px;
        background-color: #666;
         overflow: hidden;
    }
    #d2>p{
        position: absolute;
        margin-top: -150px;
        margin-left: -300px;
        color: white;
        /*display: none;*/
    }
    #d3{
        position: absolute;
        margin: 0;
        width: 170px;
        height: 185px;
        background-color: #666;
        z-index: 1;
        left: 180px;
        overflow: hidden;
    }
    #d3>p{
        position: absolute;
        margin-top: -150px;
        margin-left: -150px;
        /*display: none;*/
        z-index: 999;
        color: white;
    }

    #d1>img{
        position: absolute;
        /*display: inline-block;*/
        left: 5px;
        top: 10px;
        margin: 5px;
        height: 560px;
        width: 370px;
        z-index: 999;
    }
    #d5{
        position: absolute;
        left: -5px;
        top: 5px;
        margin: 5px;
        height: 570px;
        width: 390px;
        background-color: orange;
        display: none;
    }
    </style>
</head>
<body>
    <main>  
        <div id="d1">
            <div id="d5"></div>
            <img src="img/01.png" alt="">
        </div>
        <div id="d4">
            <div id="d2">
                <img src="img/02.png" alt="">
                <p>special品牌旗舰店<br><br>
                最具传奇浪漫色彩的欧洲<br>经典设计，给你带来专属<br>的魅力。</p>
            </div>
            <div id="d3">
                <img src="img/03.png" alt="">
                <p>sophy橡菲旗舰店<br><br>
                新款韩版微笑性感红唇上<br>衣圆领女短袖修身T恤。</p>
            </div>
        </div>
    </main>
</body>
<html>
<script>
    var isBegin = true;
    var d = $('#d1');

    d.hover(function(){
        $('#d5').fadeIn(1000);
    },function(){
       $('#d5').fadeOut(1000);
    });

    // #d2
    $('#d2').mouseover(function(){
        $('#d2 p').animate({
            marginLeft:20
        },1000);
    });
    $('#d2').hover(function(){
        if(isBegin){
            // 参数1：时间，参数2：透明度
            $('#d2 img').fadeTo(1000,0.5);
        }else{
            $('#d2 img').fadeTo(1000,1);
        }
        isBegin = !isBegin;
    });

    $('#d2').mouseout(function(){
        $('#d2 p').animate({
            marginLeft:-150
        },1000);
    });

    
    // #d3
    $('#d3').mouseover(function(){
        $('#d3 p').animate({
            marginLeft:20
        },1000);
    });
    $('#d3').hover(function(){
        if(isBegin){
            // 参数1：时间，参数2：透明度
            $('#d3 img').fadeTo(1000,0.5);
        }else{
            $('#d3 img').fadeTo(1000,1);
        }
        isBegin = !isBegin;
    });

    $('#d3').mouseout(function(){
        $('#d3 p').animate({
            marginLeft:-150
        },1000);
    });

    
</script>